import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';
import 'package:kq_flutter_tv_widgets/resources/kq_theme_colors.dart';
import 'package:kq_flutter_tv_widgets/widgets/button/kq_icon_button.dart';
import 'package:kq_flutter_tv_widgets/widgets/divider/kq_divider.dart';
import 'package:kq_flutter_tv_widgets/widgets/dragView/kq_drag_list_view.dart';
import 'package:kq_flutter_tv_widgets/widgets/tabView/kq_tab_view.dart';
import 'package:kq_flutter_tv_widgets/widgets/tabbar/kq_tab_bar.dart';
import 'package:kq_flutter_tv_widgets/widgets/tabbar/kq_tab_bar_page_view.dart';

import '../../resources/Images.dart';

/// 抽屉拖拽演示
///
/// 演示如何实现小诸葛首页设备详情效果
class DragDrawerDemo extends StatefulWidget {
  const DragDrawerDemo({Key? key}) : super(key: key);

  @override
  DragDrawerDemoState createState() => DragDrawerDemoState();
}

class DragDrawerDemoState extends State<DragDrawerDemo> {
  GlobalKey<ScaffoldState> globalKey = GlobalKey();

  EasyRefreshController controller = EasyRefreshController(
      controlFinishRefresh: true, controlFinishLoad: true);

  var tabs = [
    TabDataEntity('详情'),
    TabDataEntity('任务'),
    TabDataEntity('生产'),
    TabDataEntity('停机'),
    TabDataEntity('次品'),
    TabDataEntity('报工'),
    TabDataEntity('点检'),
    TabDataEntity('质检'),
    TabDataEntity('详情'),
    TabDataEntity('任务'),
    TabDataEntity('生产'),
    TabDataEntity('停机'),
    TabDataEntity('次品'),
    TabDataEntity('报工'),
    TabDataEntity('点检'),
    TabDataEntity('质检'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(
              child: Column(
            children: [
              SizedBox(
                height: 200,
              ),
              Expanded(
                  child: KqTabBarPageView(
                tabs: tabs,
                onPageChanged: (index, entity) {
                  print('$index');
                },
                tabScrollable: true,
                pageScrollable: false,
                indicatorType: IndicatorType.underline,
                initialPageIndex: 1,
                customTabRightView: KqIconButton(
                  icon: const Icon(Icons.more_horiz),
                  size: 44.r,
                  backgroundColor: KqThemeColors.bgWhite,
                  onPressed: () {
                    globalKey.currentState?.openEndDrawer();
                  },
                ),
                drawerGlobalKey: globalKey,
                endDrawer: Drawer(
                  width: 300.r,
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(8.0),
                        color: KqThemeColors.bgF7,
                        child: Row(
                          children: [
                            KqIconButton(
                              icon: Image.asset(Images.demoIcClose16Line),
                              size: 18.r,
                              onPressed: () {
                                globalKey.currentState?.closeEndDrawer();
                              },
                            ),
                            SizedBox(
                              width: 8.r,
                              height: 1,
                            ),
                            Text(
                              '导航排序',
                              style: TextStyle(
                                  fontSize: 16.sp, color: KqThemeColors.text26),
                            )
                          ],
                        ),
                      ),
                      Expanded(
                          child: KqDragListView(
                        onReorder: (int oldIndex, int newIndex) {},
                        children: [
                          _listItem('详情'),
                          _listItem('任务'),
                          _listItem('生产'),
                          _listItem('停机'),
                          _listItem('次品'),
                          _listItem('报工'),
                          _listItem('点检'),
                          _listItem('质检'),
                        ],
                      )),
                      const KqTabView(
                        titles: ['重置', '保存'],
                        colorTypes: [ColorType.lineBlue, ColorType.fillBlue],
                      ),
                    ],
                  ),
                ),
                pages: tabs
                    .map((e) => EasyRefresh(
                          controller: controller,
                          refreshOnStart: true,
                          onRefresh: () {
                            controller.finishRefresh();
                          },
                          child: ListView.builder(
                            itemCount: 10,
                            itemBuilder: (context, index) {
                              return ListTile(
                                title: Text('$index'),
                              );
                            },
                          ),
                        ))
                    .toList(),
              ))
            ],
          )),
          Expanded(child: Container())
        ],
      ),
    );
  }

  _listItem(String text) {
    return Container(
      color: KqThemeColors.bgWhite,
      key: Key(text),
      height: 50.r,
      child: Column(
        children: [
          Expanded(
              child: Row(
            children: [
              SizedBox(
                width: 12.r,
                height: 1,
              ),
              Image.asset(
                Images.demoIcChoice16Nor,
                width: 20.r,
                height: 20.r,
              ),
              SizedBox(
                width: 6.r,
                height: 1,
              ),
              Expanded(
                  child: Text(
                text,
                style: TextStyle(fontSize: 14.sp, color: KqThemeColors.text59),
              )),
            ],
          )),
          const KqDivider()
        ],
      ),
    );
  }
}
